import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';


const BarChart = ({ text ,xdata, ydata}) => {
    const charRef = useRef(null)

    useEffect(() => {
        let chartDom = charRef.current;
        let myChart = echarts.init(chartDom);
        let option;

        option = {
            title: {
                text: text,

            },
            xAxis: {
                type: 'category',
                data: xdata,
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: ydata,
                    type: 'bar'
                }
            ]
        };

        option && myChart.setOption(option);


    }, [])

    return <div ref={charRef} style={{ width: '600px', height: '500px' }} />


}

export default BarChart